<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理系统</title>
    <style>
        /* 基础表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-family: Arial, sans-serif;
        }

        th,
        td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
    <script type="module" src="./js/main.js"></script>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>

            </tr>
        </thead>
        <tbody id="tab">
        </tbody>
    </table>

    <div class="button-container">
        <button id="add">添加</button>
        <button id="updata">编辑</button>
        <button id="del">删除</button>
        <button id="btn1">文档碎片</button>
    </div>

    <script>
        // 获取ID为"btn1"的按钮元素
        const oBtn = document.querySelector("#btn1");

        // 给按钮添加点击事件监听器
        oBtn.addEventListener("click", () => {
            /**
             * 创建一个文档片段(document fragment)
             * 文档片段是存在于内存中的轻量级DOM结构，不会引起页面重绘/回流
             * 适合用于批量添加多个DOM元素
             */
            let fragment = document.createDocumentFragment(); // 注意：修正了变量名拼写错误(frgament -> fragment)

            // 循环创建5个div元素
            for (var i = 0; i < 5; i++) {
                // 创建一个新的div元素
                const oDiv = document.createElement("div");

                /**
                 * 创建文本节点
                 * 与直接使用innerText/textContent相比：
                 * 1. 更符合DOM操作规范
                 * 2. 可以更好地处理特殊字符
                 */
                const oTxt = document.createTextNode("我是文字");

                // 将文本节点添加到div元素中
                oDiv.appendChild(oTxt);

                // 将div元素添加到文档片段中
                fragment.appendChild(oDiv);
            }

            /**
             * 将文档片段一次性添加到body中
             * 优点：
             * 1. 只会触发一次页面重绘（相比逐个添加）
             * 2. 提高性能，特别是在添加大量元素时
             */
            document.body.appendChild(fragment);

            /**
             * 注意：当文档片段被添加到真实DOM后，
             * 片段中的所有元素会自动从片段中移除，
             * 片段会变成空文档片段
             */
        });

        /**
         * 性能优化说明：
         * 1. 使用文档片段减少DOM操作次数
         * 2. 批量添加元素比逐个添加性能更好
         * 3. 适合动态创建大量元素的场景
         * 
         * 扩展知识：
         * 现代浏览器可能会自动优化连续的DOM插入，
         * 但显式使用文档片段仍是推荐做法
         */
    </script>
</body>

</html>